@import './variable.scss'; // css变量



//激活按钮class
.active-btn{
  // background:linear-gradient(left ,#FF7C4E ,#F85D4C) !important;
  background: linear-gradient(to right, #FF7C4E 0%, #F85D4C 100%) !important;
  box-shadow: 0 6px 12px #ffc8be;
}

.btn{text-align: center;font-size:.4rem;}
.btn--m{
  display: inline-block;
  width:48%;
  line-height: 2.13rem;font-size: .3rem;
}
.btn--m:first-child{
  border-right:1px solid #F8F8F8;
}

/* btn */
.btn-box{
  display: flex;
  justify-content: center;
  align-items:center;
  .btn{
    display: inline-block;
    padding:4px 10px;margin: 0;
    line-height: 1;color: #606266;text-align: center;font-size:12px;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    border-radius:4px;background: #fff;
    // border: 1px solid #dcdfe6;
    border:none;
    box-sizing: border-box;
    transition: .1s;
  }
  .btn:hover{opacity:.9;}
  .btn-mini{padding: .12rem .24rem;font-size:.2rem;}
  .btn-small{padding:.16rem .28rem;font-size:.25rem;}
  .btn-medium{padding:0.196rem .513rem;font-size:.33rem;}
  .btn.no-border{border:none;}

  // $bgColor:#F8F8F8;
  // $mainColor:#73c841;
  // $borderColor:#E6E6E4;
  // $primaryColor:#60A6F6;
  // $successColor:#67c23a;
  // $infoColor:#909399;
  // $warningColor:#e6a23c;
  // $dangerColor:#f85d4c;
  // $calcelColor:#ddd;

  .btn-primary{color: #fff;background-color: $primaryColor;border-color: $primaryColor;}
  .btn-success{color: #fff;background-color: $successColor;border-color: $successColor;}
  .btn-info{color: #fff;background-color: $infoColor;border-color: $infoColor;}
  .btn-warning{color: #fff;background-color: $warningColor;border-color: $warningColor;}
  .btn-danger{color: #fff;background-color: $dangerColor;border-color: $dangerColor;}
  .btn-calcel{color: #fff;background-color: $calcelColor;border-color: $calcelColor;}

  .btn-primary.no-bg{color: $primaryColor; background:none;}
  .btn-success.no-bg{color: $successColor; background:none;}
  .btn-info.no-bg{color: $infoColor; background:none;}
  .btn-warning.no-bg{color: $warningColor; background:none;}
  .btn-danger.no-bg{color: $dangerColor; background:none;}
  .btn-calcel.no-bg{color: $calcelColor; background:none;}

  .btn-primary.no-border{border: none; }
  .btn-success.no-border{border: none; }
  .btn-info.no-border{border: none; }
  .btn-warning.no-border{border: none; }
  .btn-danger.no-border{border: none; }
  .btn-calcel.no-border{border: none; }
}
.btn-box-v2{
  .btn-radius{
    border-radius:.37rem;
  }
  .btn-primary{box-shadow:0 .074rem .185rem $primaryColor;}
  .btn-success{box-shadow:0 .074rem .185rem #e8a49c;}
  .btn-info{box-shadow:0 .074rem .185rem $infoColor;}
  .btn-warning{box-shadow:0 .074rem .185rem $warningColor;}
  .btn-danger{box-shadow:0 .074rem .185rem $dangerColor;}
  .btn-calcel{box-shadow:0 .074rem .185rem $calcelColor;}
}

// v2 btn 公共按钮样式
// .btn-box,
.btn-com-box{
  text-align: center;
  &.flex{
    justify-content:space-around;
  }
  .btn{
    display: inline-block;
    padding:.25rem 0;
    color:#fff;
    border-radius:.5rem;
    background-image: linear-gradient(90deg, #FF7C4E 0%, #F85D4C 100%);
    box-shadow:0 5px 28px 0px #FFC8BE;
  }
  .btn-mini{width:24%; font-size:.2rem;}
  .btn-small{width:40%; font-size:.25rem;}
  .btn-medium{width:92%; font-size:.33rem;}

  .btn-primary{
    color: #fff;
    // background-color: $primaryColor;
    background-image: linear-gradient(90deg, #77adf5 0%, $primaryColor 100%);
    box-shadow:0 5px 28px 0px #77adf5;
  }
  .btn-success{
    color: #fff;
    // background-color: $successColor;
    background-image: linear-gradient(90deg, #FF7C4E 0%, $successColor 100%);
    box-shadow:0 5px 28px 0px $successColor;
  }
  .btn-info{
    color: #fff;
    // background-color: $infoColor;
    background-image: linear-gradient(90deg, #d3d4d6 0%, $infoColor 100%);
    box-shadow:0 5px 28px 0px #d3d4d6;
  }
  .btn-warning{
    color: #fff;
    // background-color: $warningColor;
    background-image: linear-gradient(90deg, #ffe2bb 0%, $warningColor 100%);
    box-shadow:0 5px 28px 0px #ffe2bb;
  }
  .btn-danger{
    color: #fff;
    // background-color: $dangerColor;
    background-image: linear-gradient(90deg, #ff9488 0%, $dangerColor 100%);
    box-shadow:0 5px 28px 0px #ff9488;
  }
  .btn-calcel{
    color: #fff;
    background-color: $calcelColor;
    background-image: linear-gradient(90deg, #f3e5e5 0%, $calcelColor 100%);
    box-shadow:0 5px 28px 0px #f3e5e5;
  }

  .btn-primary.no-bg{color: $primaryColor; background:none;}
  .btn-success.no-bg{color: $successColor; background:none;}
  .btn-info.no-bg{color: $infoColor; background:none;}
  .btn-warning.no-bg{color: $warningColor; background:none;}
  .btn-danger.no-bg{color: $dangerColor; background:none;}
  .btn-calcel.no-bg{color: $calcelColor; background:none;}

  .btn-primary.no-shadow{box-shadow:none; }
  .btn-success.no-shadow{box-shadow:none; }
  .btn-info.no-shadow{box-shadow:none; }
  .btn-warning.no-shadow{box-shadow:none; }
  .btn-danger.no-shadow{box-shadow:none; }
  .btn-calcel.no-shadow{box-shadow:none; }

  .btn-primary.no-shadow{box-shadow:none; }
  .btn-success.no-shadow{box-shadow:none; }
  .btn-info.no-shadow{box-shadow:none; }
  .btn-warning.no-shadow{box-shadow:none; }
  .btn-danger.no-shadow{box-shadow:none; }
  .btn-calcel.no-shadow{box-shadow:none; }

  .btn-primary.no-border{border: none; }
  .btn-success.no-border{border: none; }
  .btn-info.no-border{border: none; }
  .btn-warning.no-border{border: none; }
  .btn-danger.no-border{border: none; }
  .btn-calcel.no-border{border: none; }
}

// 长按钮
.btn-box-most{
  padding: .37rem 0;
  background:#fff;
  .btn{
    $H: .88rem;
    width: 92%;
    height: $H;
    line-height: $H;
    border-radius: 1.3rem;
    padding: 0;
  }
}

// .publish-btn{
  // background:url("#{$imgUrl}/icon-publish.png") no-repeat 40% center;
  // background-color:$mainColor;
// }
.publish-btn-no-icon{
  background-image:none;
}
.publish-btn,
.bottom-fixed{
  position:fixed;bottom:0;left:0;z-index: 23;
  padding:.2rem 0;
  width:100%;
  // width:7.5rem;height:.92rem;
  // color:#fff;line-height:.92rem; text-align: center;
  // background-size: 5%;
  background-color:#fff !important;
  box-shadow:0px -2px 10px 0px #f5f6f8
}
.btn-box.no-bg,
.publish-btn.no-bg,
.bottom-fixed.no-bg{
  background-color:transparent;
}

.btn-box .no-effect,
.publish-btn .no-effect,
.bottom-fixed .no-effect{
  color: #fff;
  background-image:none;
  box-shadow: none;
  background-color: $infoColor;border-color: $infoColor;
}

.publist-icon-btn{
  // position:fixed;bottom:.37rem;right:0;z-index: 23;
  // width: 1.11rem;height: 1.11rem;
  // text-align:center;
  // background-image: linear-gradient(90deg, #FF7C4E 0%, #F85D4C 100%);
  // box-shadow:0 5px 28px 0px #FFC8BE;
  // border-radius:50%;
  $btnWH: 1rem;
  position: fixed; bottom: 2.5rem; right: 0.1rem; z-index: 23;
  width: $btnWH; height: $btnWH;
  text-align: center;
  border-radius: 50%;
  background-image: -webkit-gradient(linear,left top,right top,from(#ff7c4e),to(#f85d4c));
  background-image: linear-gradient(90deg,#ff7c4e 0,#f85d4c);
  -webkit-box-shadow: 0 1px 10px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  box-shadow: 0 1px 10px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  $iconWH:auto;
  .icon{
    margin-top:.1rem;
    width:$iconWH; height:$iconWH;
    color:#fff;font-size:.38rem; line-height:$iconWH; text-align: center;
    &.icon-edit:after{
      content:'发布';
      display: block;
      font-size:.25rem; font-weight:bold;
    }
  }
}
